<template>
  <AxiomBottomSheet
    :visible="visible"
    @update:visible="$emit('update:visible', $event)"
  >
    <div class="axiom-select-sheet">
      <!-- Header -->
      <div class="header">
        <AxiomButton
          size="small"
          type="primary"
          @click="handleClear"
          class="btn-clear"
        >
          清空
        </AxiomButton>
        
        <AxiomTitle
          :title="title"
          type="component"
          level="3"
          class="sheet-title"
        />
        
        <AxiomButton
          size="small"
          @click="$emit('update:visible', false)"
          class="btn-close"
        >
          <AxiomIcon name="Close" size="16"/>
        </AxiomButton>
      </div>
      
      <!-- Options -->
      <div class="options-list">
        <div
          v-for="option in options"
          :key="option.value"
          class="option-item"
          :class="{ selected: option.value === internalValue }"
          @click="internalValue = option.value"
        >
          <AxiomText
            weight="medium"
            :type="option.value === internalValue ? 'primary' : 'default'"
            class="option-label"
          >
            {{ option.label }}
          </AxiomText>
          
          <AxiomIcon v-if="option.value === internalValue" name="Check" class="checkmark" />

        </div>
      </div>
      
      <!-- Footer Button -->
      <div class="footer">
        <AxiomButton
          type="primary"
          size="large"
          @click="handleConfirm"
          class="confirm-button"
        >
          确定
        </AxiomButton>
      </div>
    </div>
  </AxiomBottomSheet>
</template>

<script>
import { ref, watch } from 'vue';
import AxiomBottomSheet from './AxiomBottomSheet.vue';
import AxiomButton from '../common/AxiomButton.vue';
import AxiomTitle from '../common/AxiomTitle.vue';
import AxiomText from '../common/AxiomText.vue';
import AxiomIcon from '../common/AxiomIcon.vue';

export default {
  name: 'AxiomSelectSheet',
  components: {
    AxiomBottomSheet,
    AxiomButton,
    AxiomTitle,
    AxiomText,
    AxiomIcon
  },
  props: {
    visible: Boolean,
    title: String,
    options: {
      type: Array,
      required: true,
      default: () => [],
    },
    modelValue: [String, Number, undefined],
  },
  emits: ['update:visible', 'update:modelValue'],
  setup(props, { emit }) {
    const internalValue = ref(props.modelValue);

    watch(() => props.modelValue, (newValue) => {
      internalValue.value = newValue;
    });

    const handleConfirm = () => {
      emit('update:modelValue', internalValue.value);
      emit('update:visible', false);
    };

    const handleClear = () => {
      internalValue.value = undefined;
    };

    return {
      internalValue,
      handleConfirm,
      handleClear,
    };
  }
};
</script>

<style lang="scss">
@use '../../styles/components/mobile/axiom-select-sheet';
</style>